// 导出服务 - 用于将画布内容导出为HTML或JSON格式

/**
 * 导出为JSON文件
 * @param {Array} components - 组件数据数组
 * @param {String} fileName - 文件名
 */
export const exportToJson = (components, fileName = 'page-design.json') => {
  try {
    // 深拷贝组件数据，避免修改原始数据
    const dataToExport = JSON.parse(JSON.stringify(components));
    
    // 创建JSON字符串
    const jsonString = JSON.stringify(dataToExport, null, 2);
    
    // 创建Blob对象
    const blob = new Blob([jsonString], { type: 'application/json;charset=utf-8;' });
    
    // 创建下载链接
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    
    link.setAttribute('href', url);
    link.setAttribute('download', fileName);
    link.style.visibility = 'hidden';
    
    // 添加到DOM并触发下载
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    // 释放URL对象
    URL.revokeObjectURL(url);
    
    return true;
  } catch (error) {
    console.error('导出JSON失败:', error);
    return false;
  }
};

/**
 * 导出为HTML文件
 * @param {Array} components - 组件数据数组
 * @param {String} fileName - 文件名
 */
export const exportToHtml = async (components, fileName = 'page-design.html') => {
  try {
    // 深拷贝组件数据
    const dataToExport = JSON.parse(JSON.stringify(components));
    
    // 生成HTML内容
    const htmlContent = generateHtmlContent(dataToExport);
    
    // 创建Blob对象
    const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8;' });
    
    // 创建下载链接
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    
    link.setAttribute('href', url);
    link.setAttribute('download', fileName);
    link.style.visibility = 'hidden';
    
    // 添加到DOM并触发下载
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    // 释放URL对象
    URL.revokeObjectURL(url);
    
    return true;
  } catch (error) {
    console.error('导出HTML失败:', error);
    return false;
  }
};

/**
 * 生成HTML内容
 * @param {Array} components - 组件数据数组
 * @returns {String} HTML字符串
 */
function generateHtmlContent(components) {
  // 基础HTML结构
  const htmlTemplate = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面设计导出</title>
  <!-- 引入Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- 基础样式 -->
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      line-height: 1.6;
      color: #333;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    /* 组件样式占位符 - 实际项目中可以根据组件类型添加更详细的样式 */
    .exported-component {
      margin-bottom: 20px;
      padding: 15px;
      border: 1px solid #eaeaea;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="container">
    ${generateComponentsHtml(components)}
  </div>
  
  <!-- 页面元数据 -->
  <script type="application/json" id="page-metadata">
    ${JSON.stringify({ exportTime: new Date().toISOString(), componentCount: components.length })}
  </script>
</body>
</html>`;
  
  return htmlTemplate;
}

/**
 * 生成组件HTML
 * @param {Array} components - 组件数据数组
 * @returns {String} 组件HTML字符串
 */
function generateComponentsHtml(components) {
  if (!components || components.length === 0) {
    return '<div class="empty-message">页面中没有组件</div>';
  }
  
  return components.map((component, index) => {
    const { config, props } = component;
    const componentType = config.displayName || 'Unknown Component';
    
    // 基础组件HTML结构
    // 实际项目中可以根据组件类型生成更具体的HTML
    let componentHtml = `
    <div class="exported-component" data-component-id="${index}" data-component-type="${componentType}">
      <h3>${componentType}</h3>
      <div class="component-properties">
        <!-- 组件属性将在这里显示 -->
      </div>
    </div>`;
    
    return componentHtml;
  }).join('');
}

// 导出服务对象
export default {
  exportToJson,
  exportToHtml
};